<script setup>
import {ref} from 'vue'

const props = defineProps({
  labels: {type: Array, default: () => []},
})

// 参数面板
const floatPanelVisible = ref(false)
const anchors = ref([window.innerHeight * 0.3, window.innerHeight * 0.5, window.innerHeight * 0.8])
const onOpenPanel = () => {
  floatPanelVisible.value = true
}
const onClosePanel = () => {
  floatPanelVisible.value = false
}
</script>

<template>
  <div class="product-label mt-2 ml-1 mr-1 rounded-lg overflow-hidden">
    <van-cell-group>
      <van-cell title="标签" is-link @click="onOpenPanel">
        <template #label>
          <el-tag
              v-for="item in (labels.length > 2 ? labels.slice(0, 2) : labels)"
              class="mr-1"
              type="success"
              size="small"
          >
            {{ item.name }}
          </el-tag>
          <el-tag class="mr-1" type="success" size="small">...</el-tag>
        </template>
      </van-cell>
    </van-cell-group>
    <van-overlay :show="floatPanelVisible" @click="onClosePanel"/>
    <van-floating-panel
        :content-draggable="true"
        :anchors="anchors"
        v-show="floatPanelVisible"
    >
      <div class="p-4">
        <div class="dark:text-gray-100">商品标签</div>
        <div
            class="mb-2"
            v-for="item in labels"
        >
          <el-tag
              type="success"
              size="small"
          >
            {{ item.name }}
          </el-tag>
        </div>
      </div>
    </van-floating-panel>
  </div>
</template>

<style scoped lang="scss">

</style>